<template>
  <div class="container-user">
    <el-row style="height: 100%" :gutter="5">
      <el-col :span="6" style="height: 100%">
        <el-card class="box-card" shadow="hover">
          <div class="left">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText">
            </el-input>
            <el-tree
              class="filter-tree"
              show-checkbox
              :data="data"
              :props="defaultProps"
              default-expand-all
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              :default-checked-keys="checkedKeys"
              @node-click="nodeClick"
              @check-change="checkChange"
              node-key="id"
              ref="tree"
            >
            </el-tree>
          </div>
        </el-card>
      </el-col>
      <el-col :span="9" style="height: 100%">
        <el-card class="box-card" shadow="hover">
          <div class="middle">
            <!-- <div>人员列表</div> -->
            <list-table-new
              v-bind="tableConfig"
              @selectChange="selectChange"
              @defaultSelection="checkedUser"
              ref="listTable"
            ></list-table-new>
          </div>
        </el-card>
      </el-col>
      <el-col :span="9" style="height: 100%">
        <el-card class="box-card" shadow="hover">
          <div class="right">
            <div class="clear-button">
              <el-input
                placeholder="输入名称过滤"
                size="mini"
                class="treeInput"
                v-model="choseFilter"
                suffix-icon="el-icon-search"
                clearable
              ></el-input>
              <el-button type="primary" size="mini" @click="clearUser"
                >清空</el-button
              >
            </div>
            <div class="table">
              <base-table :tableSetting="tableSetting" ref="baseTable" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { orgTreeData } from "@/api/systemManagement/orgnizationManagement.js";
import { getUserDataByOrg } from "@/api/systemManagement/userManagement.js";
export default {
  props: {
    userAuth: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      choseFilter: "",
      filterText: "",
      treeNode: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      tableConfig: {
        showAllSearch: false,
        showIndex: true,
        selectionShow: true,
        showFilterBtn: false,
        showCustomBtn: false,
        searchObj: {
          searchMethod: (params, that) => {
            if (this.tableConfig.searchObj) {
              this.$set(this.tableConfig.searchObj, "queryData", params);
              this.getTableData();
            } else {
            }
          },
          searchArr: [
            {
              type: "input",
              label: "用户名称",
              model: "name",
              placeholder: "请输入",
            },
          ],
          queryData: {
            page: 1,
            pageSize: 15,
          },
        },
        tableMethods: {
          rowClick: (e) => {},
        },
        actionList: [],
        column: [
          {
            label: "用户名",
            prop: "name",
          },
          {
            label: "组织",
            prop: "orgName",
            showTooltip: true,
            formatter: (row) => {
              if (row.orgVoList) {
                return row.orgVoList
                  .map((item) => {
                    return item.name;
                  })
                  .join(", ");
              } else {
                return "-";
              }
            },
          },
        ],
        tableData: [],
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        pageSmall: true,
        totalNumber: 0,
      },
      tableSetting: {
        column: [
          {
            label: "类型",
            textAlign: "center",
            prop: "isOrg",
            formatter: (row) => {
              return row.isOrg ? "组织" : "人员";
            },
          },
          {
            label: "名称",
            textAlign: "center",
            prop: "userOrgName",
          },
          {
            label: "操作",
            textAlign: "center",
            type: "button",
            buttonArr: [
              {
                text: "删除",
                isShow: () => {
                  return true;
                },
                methods: (row, index) => {
                  this.$confirm("确定要删除该条数据吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                    .then(() => {
                      this.selectedUser.forEach((item,i) => {
                        if (item.userOrgId == row.userOrgId) {
                          this.selectedUser.splice(i, 1);
                        }
                      });
                      
                      this.deleteSelectedData(row);
                    })
                    .catch((e) => {});
                },
              },
            ],
          },
        ],
        data: [],
      },
      //组织树默认选中节点
      checkedKeys: [],
      //已选择的用户
      selectedUser: [],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    choseFilter(val) {
      this.filterChoseData(val);
    },
    selectedUser: {
      handler(val) {
        this.filterChoseData(this.choseFilter);
      },
    },
    userAuth: {
      handler(val) {
        this.selectedUser = JSON.parse(JSON.stringify(val));
      },
    },
  },
  created() {
    this.getOrgTreeData();
  },
  mounted() {
    this.selectedUser = JSON.parse(JSON.stringify(this.userAuth));
    this.$set(this.tableSetting, "data", this.selectedUser);
    this.initAuth();
  },
  methods: {
    //初始化权限
    initAuth() {
      let arr = this.selectedUser.map((item) => {
        if (item.isOrg == 1) {
          return item.userOrgId;
        }
      });
      this.checkedKeys = arr;
      this.$refs.tree.setCheckedKeys(arr, true);
    },
    //点击组织节点
    nodeClick(data, value) {
      this.treeNode = data.id;
      this.getTableData();
    },
    //改变组织勾选框
    checkChange(data, selected, children) {
      if (selected) {
        delete data.children;
        data.isOrg = 1;
        data.userOrgId = data.id;
        data.userOrgName = data.name;
        this.selectedUser.push(data);
        this.checkedKeys.push(data.id);
      } else {
        this.checkedKeys.remove(data.id);
        this.selectedUser.forEach((item, i) => {
          if (item.userOrgId === data.id) {
            this.selectedUser.splice(i, 1);
            return;
          }
        });
      }
    },
    //添加或取消已选用户
    selectChange(selected, row) {
      if (selected) {
        row.isOrg = 0;
        row.userOrgId = row.account;
        row.userOrgName = row.name;
        this.selectedUser.push(row);
      } else {
        this.selectedUser.forEach((item, i) => {
          if (item.userOrgId === row.account) {
            this.selectedUser.splice(i, 1);
            return;
          }
        });
      }
    },
    //删除已选中数据
    deleteSelectedData(row) {
      if (row.isOrg == 0) {
        this.tableConfig.tableData.forEach((value) => {
          if (value.account == row.userOrgId) {
            this.$refs.listTable.selectionCalce(value);
          }
        });
      } else {
        this.checkedKeys.splice(this.checkedKeys.indexOf(row.userOrgId), 1);
        this.$refs.tree.setCheckedKeys(this.checkedKeys, false);
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //获取组织树数据
    getOrgTreeData() {
      //得到组织树的数据
      orgTreeData().then(
        (res) => {
          if (res.code == 200 && res.data.length > 0) {
            this.data = res.data;
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //获取组织下用户信息
    getTableData(id) {
      let queryData = Object.assign({}, this.tableConfig.searchObj.queryData);
      queryData.orgId = this.treeNode;
      getUserDataByOrg(queryData).then(
        (res) => {
          if (res.code) {
            this.$set(this.tableConfig, "tableData", res.data);
            this.$set(this.tableConfig, "totalNumber", res.total);
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //勾选已选人员
    checkedUser() {
      let arr = [];
      this.selectedUser.forEach((item) => {
        if (item.isOrg == 0) {
          item.account = item.userOrgId;
          arr.push(item);
        }
      });
      arr.forEach((item) => {
        this.tableConfig.tableData.forEach((value) => {
          if (value.account == item.userOrgId) {
            this.$refs.listTable.selectioned(value);
          }
        });
      });
    },
    filterChoseData(val) {
      let reg = new RegExp(val);
      this.tableSetting.data = this.selectedUser.filter((item) => {
        return item.userOrgName.match(reg);
      });
    },
    //清空人员列表
    clearUser() {
      this.selectedUser = [];
      this.$refs.listTable.clearSelection();
    },
    //获取已选择人员
    getSelectUser() {
      return this.selectedUser;
    },
  },
};
</script>

<style lang="less" scoped>
.container-user {
  width: 100%;
  height: 100%;
  padding-bottom: 10px;
  .left {
    overflow: auto;
    width: 100%;
    height: 100%;
    /deep/.el-tree-node {
      .el-tree-node__expand-icon + .custom-tree-node {
        font-weight: 700;
      }
      .is-leaf + .custom-tree-node {
        font-weight: 400;
      }
    }
  }
  .middle {
    width: 100%;
    height: 100%;
    /deep/.el-table {
      .el-table__fixed-header-wrapper {
        .el-checkbox {
          display: none;
        }
      }
    }
  }
  .right {
    width: 100%;
    height: 100%;
    .clear-button {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      .treeInput {
        width: 50%;
      }
    }
    .table {
      height: calc(100% - 20px);
    }
  }
  .box-card {
    width: 100%;
    height: 100%;
    /deep/.el-card__body {
      width: 100%;
      height: 100%;
    }
  }
}
</style>